<template>
     <div class="reply-area">
         <div class="reply-disabled" v-if="!isTrigger">
            <div class="reply">
              <input type="text" :placeholder="placeholderTxt" v-model="content"
              @focus="showTextarea">
            </div>
            <div class="other">
                <span class="count">{{commemtCount}}</span>
                <i class="iconfont iconpinglun-"></i>
                <i class="iconfont iconshoucang" :class="hasStar ? 'heightlight':''" @click="starNews"></i>
                <i class="iconfont iconfenxiang"></i>
            </div>
         </div>
         <div class="reply-abled" v-if="isTrigger">
            <div class="reply">
              <textarea rows="3" :placeholder="placeholderTxt" v-model="content"
              @blur="hideTextarea" ref="textarea"></textarea>
            </div>
            <div class="send">
                <button @click="sendReply">发送</button>
            </div>
         </div>
     </div>
</template>

<script>
export default {
    props:['parentInfo','hasStar','commemtCount'],
    data(){
        return{
            isTrigger:false,
            content:''
        }
    },
    // 计算属性
    computed:{
        // 通过判断是否有昵称来变更placeholder的值
        placeholderTxt(){
            if(this.parentInfo.nickname){
                return '回复@' + this.parentInfo.nickname;
            }else{
                return '写跟贴';
            } 
        }
    },
    methods:{
        hideTextarea(){
            //延迟文本域隐藏时间，以便发送回复
            setTimeout(()=>{
                this.isTrigger = false;
            },50);
        },
        showTextarea(){
            //将数据改为 true 让文本域弹出
            this.isTrigger = true;
            // 自动聚焦
            // this.$refs.textarea.focus()
            // 报错
            // 因为 vue 的显示是根据生命周期循环
            // 如果数据发生变化, 就会触发代码执行, 然后更新页面
            // 跟 jq 或原生, 执行完每行代码结果马上显示的逻辑不通
            // vue 实现执行完所有代码, 再把 页面更新的结果显示出来
            // 这里需要等到这次页面更新完毕, 下一步的时候才可以开始聚焦
            // setTimeout 定时器是可以的, 但是等待的时间靠猜的, 每次固定
            // vue 提供了一个函数 this.$nextTick()
            // 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
            this.$nextTick(()=>{
                this.$refs.textarea.focus();
            });
        },
        //自己发帖只需要传文章id和帖子内容
        sendReply(){
            this.$axios({
                // 文章id直接通过地址栏获取
                url:'/post_comment/'+this.$route.params.id,
                method:'post',
                data:{
                    content:this.content,
                    parent_id:this.parentInfo.id?this.parentInfo.id:''
                }
            }).then(res => {
                this.$emit('loadDetail');
                this.content = '';
                this.$toast(res.data.message);
            })
        },
        starNews(){
            this.$axios({
                url:'/post_star/'+ this.$route.params.id
            }).then(res=>{
                if(res.data.message == '收藏成功'){
                    this.$emit('loadDetail');
                    this.$toast(res.data.message);
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.reply-area{
    position: fixed;
    left:0;
    bottom:0;
    width:100%;
    padding:5.556vw 0 2.778vw 0;
    border-top: 1px solid #E4E4E4;
    background-color: #fff;
    .reply-disabled{
        display: flex;
        .reply{
            flex:6;
            input{
                width: 50.556vw;
                height: 9.444vw;
                margin-left: 4.444vw;
                background-color: #D7D7D7;
                border-radius: 4.722vw;
                text-indent: 5.556vw;
                color: #333;
                font-size: 3.333vw;
                &::placeholder{
                    color: #333333;
                    font-size: 3.889vw;
                }
            }
        }
        .other{
            position: relative;
            flex:4;
            display: flex;
            justify-content:space-around;
            .iconfont{
                font-size: 6.667vw;
                color: #494949;
                font-weight: 550;
            }
            .count{
                position: absolute;
                left: 5vw;
                top: -1.389vw;
                padding:1px 1.389vw;
                color: #fff;
                font-size: 3.333vw;
                background-color: #ffc0cb;
                border-radius: 2.222vw;
            }
        }
    }
    .reply-abled{
        display: flex;
        padding:0 6.111vw;
        .reply{
            flex:75%;
            display: flex;
            align-items: flex-end;
            textarea{
                width:100%;
                background-color: #D7D7D7;
                padding:5vw;
                border-radius: 4.167vw;
                font-size: 3.333vw;
                color: #333;
                &::placeholder{
                    color: #333333;
                    font-size: 3.889vw;
                }
            }
        }
        .send{
            flex:25%;
            display: flex;
            align-items: flex-end;
            padding-left: 2.778vw;
            button{
                width: 19.444vw;
                height: 8.333vw;  
                background-color: #ffc0cb;
                color: #fff;
                font-size: 3.333vw;
                border-radius: 4.167vw;
            }
        }
    }
}
.heightlight{
    color: #ffc0cb !important;
}
</style>